@import '~antd/es/style/themes/default.less';

@color: #3569FD;

html,
body,
#root {
  height: 100%;
  overflow-y: hidden;
}

#logo h1 {
  font-size: 14px;
}

.colorWeak {
  filter: invert(80%);
}

.ant-layout {
  min-height: 100vh;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: inherit;
  fill: currentColor;
  overflow: hidden;
}

.ant-layout-sider-children {
  background: #19344b !important; // 不包含menu

  >.ant-pro-sider-menu-logo {
    background: #19344b !important; // logo
  }
}

.ant-pro-sider-menu {
  background: #19344b !important; // menu
}

.ant-menu-sub {
  background: #19344b !important; // 二级背景

  >.ant-menu-item-selected {
    background: #19344b !important;
  }
}

.ant-menu-dark .ant-menu-item,
.ant-menu-dark .ant-menu-item-group-title,
.ant-menu-dark .ant-menu-item>a,
.ant-menu-dark .ant-menu-item>span>a {
  color: rgba(255, 255, 255, 0.85);
}

.ant-menu.ant-menu-dark,
.ant-menu-dark .ant-menu-sub,
.ant-menu.ant-menu-dark .ant-menu-sub {
  color: rgba(255, 255, 255, 0.85);
  background: #19344b;
}

.ant-layout-header {
  height: 64px;
  padding: 0 50px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 64px;
  background: #19344b;
}


.ant-menu-item:hover,
.ant-menu-item-active,
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active,
.ant-menu-submenu-title:hover {
  color: #000;
}


.has-error .ant-select:not(.ant-select-borderless) .ant-select-selector {
  // background-color: #000;
  border-color: #ff4d4f !important;
}

.ant-breadcrumb,
.ant-breadcrumb a {
  color: #000;
}

.ant-breadcrumb-separator {
  color: #000;
}

.ant-breadcrumb-link {
  color: #000;
}

.ant-breadcrumb>span:last-child a {
  color: #000;
}

.ant-input-group-addon {
  position: relative;
  padding: 0 0 0 11px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: normal;
  font-size: 14px;
  text-align: center;
  background-color: #fafafa;
  transition: all 0.3s;
  border: 0;
  border-radius: 0;
}

canvas {
  display: block;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul,
ol {
  list-style: none;
}

@media (max-width: @screen-xs) {
  .ant-table {
    width: 100%;
    overflow-x: auto;

    &-thead>tr,
    &-tbody>tr {

      >th,
      >td {
        white-space: pre;

        >span {
          display: block;
        }
      }
    }
  }
}

// 兼容IE11
@media screen and(-ms-high-contrast: active),
(-ms-high-contrast: none) {
  body .ant-design-pro>.ant-layout {
    min-height: 100vh;
  }
}

tr,
td {
  white-space: nowrap;
}

.ant-modal {
  .ant-modal-content {
    .ant-modal-header {
      padding: 16px 24px;
      color: rgba(0, 0, 0, .65);
      background: #fff;
      border-bottom: 1px solid #e8e8e8;
      border-radius: 4px 4px 0 0;
    }

    .ant-modal-body {
      padding: 24px;
      font-size: 14px;
      line-height: 1.5;
      word-wrap: break-word;
    }
  }
}

.ant-card {
  >.ant-card-body {
    padding: 16px 24px;
  }
}


// menu 宽度
@menu-width: var(--menu-width);
// blocks 宽度
@blocks-width: var(--blocks-width);

#blocks {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // border-radius: 10px;
}

.scratchCategoryMenu {
  width: 0;
  min-width: @menu-width;
 
}


.scratchCategoryMenuItem {
  padding: 0;
  height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .scratchCategoryMenuItemLabel {
    font-size: 12px !important;
  }  
}

.scratchCategoryMenuRow .categorySelected{
  border-right: 2px solid var(--toolbox-selected-border);
}

.blocklyToolboxDiv::-webkit-scrollbar {
  width: 6px;
  height: 1px;
}

.blocklyToolboxDiv::-webkit-scrollbar-thumb {
  background: rgba(206, 205, 206, 1);
  border-radius: 6px;
  -webkit-box-shadow: inset 0 0 5px #cecdce;
}

// .blocklyToolboxDiv::-webkit-scrollbar-track {
//   background: #ededed;
//   border-radius: 6px;
//   -webkit-box-shadow: inset 0 0 5px #cecdce;
// }

.blocklyFlyout {
  border-right: 1px solid #ccc;
  transform: translate(@menu-width, 0) !important;
}

.blocklyFlyoutScrollbar {
  transform: translate(calc(@menu-width + @blocks-width - 20px), 2.5px) !important;
}

// .injectionDiv::after {
//   position: absolute;
//   top: 0;
//   right: 0;
//   z-index: -1;
//   width: calc(100% - @menu-width - @blocks-width);
//   height: 100%;
//   background: #fff;
//   border-top-left-radius: 0.5rem;
//   border-bottom-left-radius: 0.5rem;
//   opacity: 0.6;
//   content: '';
// }

// .blocklyScrollbarHandle {
//   opacity: 0.5;
//   fill: #ffffff;
// }

// .blocklyFlyoutBackground {
//   fill: #fff;
//   fill-opacity: 0.6;
// }

.blocklyMainBackground {
  stroke: none;
}

// .injectionDiv::before {
//   // background: red;
//   position: absolute;
//   top: 0;
//   right: calc(100% - 397px);
//   z-index: 20;
//   width: 10px;
//   height: 100%;
//   background: transparent;
//   content: '';
// }

.toolboxHide {
  display: none !important;
}

// g[data-argument-type='dropdown'] {
//   path {
//     fill: #ffffff;
//   }

//   rect {
//     fill: #ffffff;
//   }
// } 

.blocklyDropdownText {
  fill: #ffffff !important;
}

.blocklyDropDownDiv .goog-menuitem {
  color: #000000 !important;
}

.blocklyEditableText image {
  fill: #000000;
}

.toolboxHide {
  display: none;
}

.controlBox {
  .ant-tabs-nav-wrap {
    padding: 0 20px;
    background: #f7f8fa;
  }
}

.blocklyWidgetDiv {
  z-index: 998 !important;
}

.ant-popover-arrow-content::before {
  // background: linear-gradient(to left, #3569FD 50%, #3569FD 50%) no-repeat -10px -10px;
}
.ant-descriptions-item-content{
    white-space: pre-wrap;
}

.blocklyTextColor {
  fill: var(--color);
}

.scratchCategoryItemBubble {
  width: 20px !important;
  height: 20px !important;
  margin: 0 auto 5px !important;
}

.colorSlider {
  .ant-slider-handle {
    width: 32px;
    height: 32px;
    margin-top: -12px;
    border: solid 4px var(--color-slider-color);
  }

  .ant-slider-rail,
  .ant-slider-track,
  .ant-slider:hover .ant-slider-rail,
  .ant-slider:hover .ant-slider-track {
    background-color: transparent;
  }

  .ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
    border: solid 4px var(--color-slider-color);
  }

  .ant-slider-rail {
    height: 7px;
    background: linear-gradient(
      to right,
      #FA0100,
      #00C80A,
      #0A0FFF,
      #FF9609,
      #00FD7D,
      #C80F9B,
      #FFFF23,
      #E6FA4B,
      #B4FF64,
      #82FF78,
      #D2FA28,
      #FF140A,
      #FF5A03,
      #FF1B0F,
      #FF6E21,
      #FF191E,
      #F5375F,
      #FA462D,
      #FA3232,
      #FA3702,
      #F04B0D,
      #FABE03,
      #FA8255,
      #FFAA14,
      #D2737D,
      #F5968C,
      #E65AB4,
      #F5374B,
      #FF9B69,
      #50FF08,
      #28BE28,
      #B4FF37,
      #FA5541,
      #FA7369,
      #0000FF,
      #0046FF,
      #0069FA,
      #00BEFF,
      #329BE1,
      #00FFD2,
      #1496FF,
      #28A0FF,
      #46C864,
      #28F014,
      #0096C8,
      #00AA30,
      #00C8C8,
      #00AA28,
      #46FFF0,
      #00FFC8,
      #23781E,
      #32A032,
      #329632,
      #F0B432,
      #FF9632,
      #78FFD2,
      #C314DC,
      #DC4BC3,
      #BE1ED2,
      #C8468C,
      #FF00AF,
      #FA501B,
      #FA4904,
      #FC3C3C,
    );
    border-radius: 10px;
  }
}


.upload {
  width: 100%;
  display: block;

  .ant-upload {
    width: 100%;
  }
}